<!--
 * @Author: liyaqi liyaqi0126@163.com
 * @Date: 2024-10-08 13:58:28
 * @LastEditors: liyaqi liyaqi0126@163.com
 * @LastEditTime: 2024-10-08 17:51:36
 * @FilePath: \FinancialLeasing-FG-FLCompany\src\views\processManage\contractFormulate\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">        

        <div class="box">
            <el-card class="box-card">
                <div slot="header">
                    合同制定
                </div>
                <div>
                    <el-button type="primary" size="mini" @click="handleSelectProject">选择项目</el-button>
                </div>
                <el-descriptions :column="4" border style="margin-top: 10px;">
                    <el-descriptions-item label="项目编号">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="客户名称">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="代理商名称">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="立项通过时间">18100000000</el-descriptions-item>
                    <el-descriptions-item label="租赁物厂商">18100000000</el-descriptions-item>
                    <el-descriptions-item label="租赁物合同金额">18100000000</el-descriptions-item>
                    <el-descriptions-item label="融资金额">18100000000</el-descriptions-item>
                    <el-descriptions-item label="期数">18100000000</el-descriptions-item>
                    <el-descriptions-item label="立项详情">
                        <el-button type="text" size="mini" icon="el-icon-view" @click="handleSeeDetail">查看</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>


        <div class="box">
            <el-card class="box-card">
                <div slot="header">
                    融资租赁合同
                </div>
                <!-- <div>
                    <el-button type="primary" size="mini" @click="handleSelectTemplete">选择合同模板</el-button>
                </div> -->



                <el-form :model="form" ref="form" size="small" :inline="true">
                    <el-form-item label="主要租赁物" prop="mainLease">
                        <el-input v-model="form.mainLease" placeholder="请输入主要租赁物" clearable/>
                    </el-form-item>
                    <el-form-item label="合同编号" prop="contractCode">
                        <el-input v-model="form.contractCode" placeholder="请输入合同编号" clearable disabled/>
                    </el-form-item>
                    <div style="float: right;">
                        <el-button type="primary" size="mini" @click="handleSelectTemplete">选择合同模板</el-button>
                    </div>
                    <div style="padding-top: 10px;padding-bottom: 10px;font-weight: bold;">融资租赁合同</div>
                    <el-form-item label="合同编号" prop="leaseContractCode">
                        <el-input v-model="form.leaseContractCode" placeholder="请输入合同编号" clearable disabled/>
                    </el-form-item>

                    <div>
                        <el-button type="primary" size="mini" icon="el-icon-view" @click="handleSelectTemplete">在线预览</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-download" @click="handleSelectTemplete">合同下载</el-button>
                        <div style="float: right;">
                            <el-button type="text" size="mini" icon="el-icon-delete" @click="handleSelectTemplete" style="color: red;">删除</el-button>
                        </div>
                    </div>


                    <div style="text-align: center;">
                        <el-form-item label="下一节点审批人：" prop="nextApprover" style="padding-top: 10px;">
                            <el-radio-group v-model="form.nextApprover" v-removeAriaHidden>
                                <el-radio label="1">审批人111</el-radio>
                                <el-radio label="2">审批人2222</el-radio>
                            </el-radio-group>
                            <el-button type="primary" size="mini" @click="handleSaveDraft" style="margin-left: 50px;">保存草稿</el-button>
                            <el-button type="primary" size="mini" @click="handleSubmit">确认提交</el-button>
                        </el-form-item>
                    </div>

                    
                    
                </el-form>



            </el-card>
        </div>



        <!-- 选择项目 -->
        <SelectProject :visible.sync="selectProjectShow" @selectSuccess="getProjectData"></SelectProject>

        <!-- 选择合同模板 -->
        <SelectTemplete :visible.sync="selectTempleteShow" @selectSuccess="getTempleteData"></SelectTemplete>
  
      
    </div>
</template>
  
<script>
// 选择项目
import SelectProject from './components/selectProject'
import SelectTemplete from './components/selectTemplete'

export default {
    name: 'contractFormulate',
    dicts: [],
    components: {
        SelectProject,
        SelectTemplete
    },
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 是否显示弹出层
            open: false,
            

            // 选择项目弹窗
            selectProjectShow: false,


            // 选择合同模板
            selectTempleteShow: false,

            // 表单参数
            form: {
                // mainLease: undefined,
                // contractCode: undefined,
                // leaseContractCode: undefined,
            },


        }
    },
    created() {
    //   this.getList()
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true
                this.loading = false
        },

        // 合同制定-选择项目
        handleSelectProject() {
            this.selectProjectShow = true
        },


        // 查询选择项目的详细信息
        getProjectData() {},



        // 查看立项详情
        handleSeeDetail() {},


        // 选择合同模板
        handleSelectTemplete() {
            this.selectTempleteShow = true
        },

        getTempleteData() {},



        // 保存草稿
        handleSaveDraft() {},


        // 确认提交
        handleSubmit() {}




    }
}
</script>

<style lang="scss" scoped>
.box {
    margin-bottom: 20px;
    .el-timeline {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .el-timeline-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        :deep(.el-timeline-item__tail) {
            position: absolute;
            left: 0px;
            top: 4px;
            width: 100%;
            border-left: none;
            border-top: 2px solid #dfe4ed;
        }
        :deep(.el-timeline-item__wrapper) {
            position: relative;
            padding-left: 28px;
            top: 20px;
            left: -50%;
        }
    }
}
</style>